<template>
  <div class="category">
    <van-sidebar v-model="activeKey" @change="onChange">
      <van-sidebar-item :title="item.categoryName" v-for="item in cateList" :key="item.categoryId" />
    </van-sidebar>
    <div class="contents" ref="content">
      <div class="content" v-for="( item, index ) in cateList" :key="item.categoryId">
        <template v-if="activeKey == index">
          <div class="item" v-for="good in item.childs" :key="good.categoryName">
            <p class="list_title">
              {{ good.categoryName }}
            </p>
            <div class="subitems">
              <div class="subitem" v-for="item1 in good.childs" :key="item1.categoryName">
                <img :src="item1.categoryImage ? item1.categoryImage : require('@/assets/img/type/default.png')">
                <p>{{ item1.categoryName }}</p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CateType',
  data() {
    return {
      activeKey: 0,
      cateList: []
    }
  },
  created() {
    this.$apiProxy({
      url: '/category',
      method: 'get'
    }).then(res => {
      // console.log(res);
      this.cateList = res.data;
      // console.log(this.cateList);
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {
    onChange() {
      this.$refs.content.scrollTop = 0;
    },
  },
}
</script>
 
<style lang="less">
.category {
  margin-top: 10px;
  margin-bottom: 50px;
  height: calc(100vh);
  display: flex;

  .van-sidebar {
    height: 100%;
    width: 100px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;

    .van-sidebar-item {
      padding: 25px 12px;
      background: #e8e8e8;
      border-left: 3px solid #e8e8e8;
      font-size: 14px;
      width: 100%;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .van-sidebar-item--select {
      background-color: white;
      border-left: 3px solid #f74747;
    }

    .van-sidebar-item--select::before {
      display: none;
    }
  }

  .contents {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 10px 10px 0px;

    .content {
      .item {
        margin: 6px 0px;

        .list_title {
          font-size: 14px;
          color: #333;
          padding-left: 6px;
          padding-top: 6px;
          padding-bottom: 15px;
          font-weight: 400;
          background: #fff;
        }

        .subitems {
          .subitem {
            display: block;
            width: 33.333%;
            padding: 0 0;
            margin-left: -1px;
            float: left;
            background: #fff;
            height: 94px;
            font-size: 12px;
            text-align: center;

            img {
              width: 50px;
              height: 50px;
            }

            p {
              height: 33px;
              font-style: normal;
              padding: 0 6px;
              display: block;
              text-align: center;
              font-size: 12px;
              color: #666;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              position: relative;
              top: 25%;
              -webkit-transform: translateY(-55%);
            }
          }
        }

        .subitems::after {
          display: block;
          content: "clear";
          height: 0;
          clear: both;
          overflow: hidden;
          visibility: hidden;
        }
      }
    }
  }
}
</style>
